<template>
	<div>
		<div class="popUp" :style='popStyle'>
			<div class="popUp-content" :style='popConStyle'>
				<div class="pop-top">
					<img :src="iconSrc" alt="" />
				</div>
				<h5>{{popBuyData.h5Content}}</h5>
				<p>{{popBuyData.pContent}}</p>
				<div class="pop-bottom">
					<router-link :to="{'name':popBuyData.leftRouterName}" class="routerShow">{{popBuyData.buttonLeftCon}}</router-link>
					<router-link :to="{'name':popBuyData.rightRouterName}" @click.native="clickCancle">{{popBuyData.buttonRightCon}}</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  export default {
    data () {
      return {
        popStyle: {
          width: '200px',
          height: '100px'
        },
        popConStyle: {
          marginTop: '300px'
        },
        iconSrc: require('../../assets/public/xufei.png')
      }
    },
    props: {
      popBuyData: {
        type: Object,
        default: function () {
          var obj = {
            h5Content: '',
            pContent: '',
            buttonLeftCon: '',
            leftRouterName: '',
            buttonRightCon: '',
            rightRouterName: ''
          }
          return obj
        }
      }
    },
    mounted () {
      var that = this
      function changeShiTu (shiTu) {
        var stWidth = window.innerWidth
        var stHeight = window.innerHeight
        var conTop = stHeight / 2 - 210
        shiTu.popStyle.width = stWidth + 'px'
        shiTu.popStyle.height = stHeight + 'px'
        shiTu.popConStyle.marginTop = conTop + 'px'
      }
      changeShiTu(that)
      window.onresize = function () {
        changeShiTu(that)
      }
    },
    methods: {
      clickCancle () {
        this.$emit('cancelBuy')
      }
    }
  }
</script>

<style scoped>
	@import '../../../static/components/public/popUpBuy.css'
</style>